<template>
    <div class="movie">
        <h1>电影</h1>
        <hr>
        <h3>动态路由案例：</h3>
        <router-link to="/home">首页</router-link> &nbsp;
        <router-link to="/movie/1">电影1</router-link> &nbsp;
        <router-link to="/movie/2">电影2</router-link> &nbsp;
        <router-link to="/movie/3">电影3</router-link> &nbsp;
        <router-link to="/movie/4">电影4</router-link> &nbsp;
        <hr>
        <h2>获取的id是：{{$route.params.id}}</h2>
        <hr>
        <button @click="showId">获取ID</button>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: "Movie",
        methods:{
            showId(){
                console.log('showId方法执行了》。。')
                // console.log(this)
                console.log('id ==>' + this.$route.params.id)
            }
        }
    }
</script>

<style scoped>
    .movie{
        background-color: pink;
    }
</style>